'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import './style.less';
import MainArea from '../../components/common/mainArea'

import CreateDialog from './CreateDialog.jsx';
import PrevDialog from './PrevDialog.jsx';
import DeleteDialog from './DeleteDialog.jsx';
import { setDialog } from '../../reducers/common/actions';
import { getRows,setRow } from '../../reducers/page/actions';
import { Button,Table } from 'antd';

class MobilePage extends Component {
    constructor(props) {
        super(props);
        this.props.getRows();
    }
    render() {
        let {pageDeleteDialogVisible,pageCreateDialogVisible,pagePrevDialogVisible} = this.props.dialog;

        let dataSource = [];

        const columns = [{
            title: 'Hash',
            dataIndex: 'hash',
            key: 'hash'
        }, {
            title: '标题',
            dataIndex: 'title',
            key: 'title'
        }, {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render:(text,row,index)=>{
                return (
                    <div>{text == 1 ? "上架" : "下架"}</div>
                )
            }
        }, {
            title: '添加时间',
            dataIndex: 'add_time',
            key: 'add_time',
        }, {
            title: '操作',
            dataIndex: '',
            key: '',
            render:(text,row)=>{
                return (
                    <span>
                      <a href="javascript:void(0)" onClick={::this.onEditBtnClick.bind(this,row.hash)}>修改</a>
                      <span className="ant-divider" />
                      <a href="javascript:void(0)" onClick={::this.onDeleteBtnClick.bind(this,row)}>删除</a>
                    </span>
                )
            }
        }];
        this.props.rows.map(row =>{
            dataSource.push({
                key:row.key,
                hash:row.hash,
                id:row.id,
                title:row.title,
                status:row.status,
                add_time:row.add_time,
                timestamp:row.timestamp,
            });
        });
        dataSource.sort((a,b)=>{
            return - a.timestamp + b.timestamp;
        })
        return (
            <MainArea title="活动页面" className="page">
                {
                    pageCreateDialogVisible ? <CreateDialog />:null
                }
                {
                    pagePrevDialogVisible ? <PrevDialog />:null
                }
                {
                    pageDeleteDialogVisible ? <DeleteDialog />:null
                }
                <div className="header" style={{ marginTop:16,marginBottom: 16 }}>
                    <Button type="primary" icon="plus" onClick={::this.onCreateBtnClick}>创建页面</Button>
                </div>
                <div className="body">
                    <Table dataSource={dataSource} columns={columns} />
                </div>
            </MainArea>
        );
    }
    onEditBtnClick(hash){
        location.href = "#/mobile/admin/page/"+hash
    }
    onDeleteBtnClick(row){
        this.props.setRow(row);
        this.props.setDialog("pageDeleteDialogVisible",true);
    }
    onCreateBtnClick(){
        this.props.setRow({});
        this.props.setDialog("pageCreateDialogVisible",true);
    }
    onPrevBtnClick(row){
        this.props.setRow(row);
        this.props.setDialog("pagePrevDialogVisible",true);
    }
}


export default connect(
    state =>{
        return {
            dialog:state.common.dialog,
            rows:state.page.rows
        };
    },
    dispatch =>{
        return {
            setDialog: (key,value) => dispatch(setDialog(key,value)),
            getRows: () => dispatch(getRows()),
            setRow: (row) => dispatch(setRow(row)),
        };
    }
)(MobilePage);
